<script>
    export default {
        name:'MyItem',
        props:['todo'],
        mounted(){
            setTimeout(()=>{
                this.$refs.ikj.classList.remove('comings')
            },1500),
            //监听销毁预告
            this.$bus.on(`bye${this.todo.id}`,()=>{
                this.$refs.ikj.classList.add('outings');
            })
        },
        methods:{
            delById(){
                if(confirm('确认删除吗？')){
                    this.$refs.ikj.classList.add('outings')
                    setTimeout(()=>{
                        this.$bus.emit('delById',this.todo.id);
                    },1000)
                }
            }
        }
    }
</script>
<template>
    <div id="ItemKj" ref="ikj" class="comings">
        <input  class="selOpt doneBox" type="checkbox" name="" :id="todo.id" v-model="todo.done">
        <label  class="selOpt todoName" :for="todo.id" :style="todo.done?'text-decoration:line-through;':''">{{todo.name}}</label>
        <button class="selOpt delBt" @click="delById" >X</button>
    </div>
</template>
<style scoped>
    #ItemKj{
        border: 1px solid gray;
        height: 4vh;
        line-height: 4vh;
        margin: 10px 10px;
        border-radius: 10px;
        padding: 3px 3px;
        display: flex;
        width: 90%;
        /*
        添加动画 
        动画名称 animation-name 
        animation-name: todow;
        动画时长 animation-duration 
        animation-duration: 1s;
        动画重复次数 animation-iteration-count 
        animation-iteration-count: 1;
        播放方向 animation-direction 
        animation-direction: alternate;
        */

        position: relative;
    }
    .comings{
        animation: coming 1s;
    }
    .outings{
        animation: outing 1s;
    }


    @keyframes coming{
        from {
            left: -100%;
        }
        to {
            left: 0;
        }
    }
    @keyframes outing {
        from {
            left: 0;
        }
        to {
            left: 100%;
        }
    }




    .selOpt{
        display: inline-block;
    }
    
    .doneBox{
        flex: 2;
    }
    .todoName{
        flex: 13;
        color: rgb(136, 50, 0);
        letter-spacing: 3px;
    }
    .delBt{
        flex: 1;
        background-color: rgba(255, 0, 0, 0.959);
        border: 1px solid gray;
        border-radius: 10px;
        color: yellow;
        font-size: 18px;
        visibility:hidden;
    }
    #ItemKj:hover .delBt {
        visibility: visible;
    }
    #ItemKj:hover{
        background-color: rgba(128, 128, 128, 0.651);
    }
    #ItemKj,.selOpt:hover{
        cursor: pointer;
    }


</style>